<template>
  <transition name="slide-fade" ref="refSlideView" @after-enter="afterEnter">
    <el-card id="slide" ref="slide" :style="{ 'z-index': zIndex }"
             :body-style="bodyStyle" class="slide-detail-card-container">
      <el-button v-if="showClose" class="close-btn xr-btn--orange"
                 type="primary"
                 icon="el-icon-close"
                 @click="close"/>
      <slot/>
      <el-dialog v-model="dialogVisible"
                 :append-to-body="true"
                 :close-on-click-modal="false"
                 class="no-padding-dialog"
                 title="提示"
                 top="30vh"
                 width="420px">
        <div class="el-message-box__container" style="padding: 10px 15px 15px;">
          <div class="el-message-box__status el-icon-warning"/>
          <div class="el-message-box__message">确定离开？正在编辑的内容将会丢失。</div>
        </div>
        <template v-slot:footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogSure">确 定</el-button></span>
        </template>
      </el-dialog>
    </el-card>
  </transition>
</template>

<script setup>
import {getMaxIndex} from '/src/utils/index.js'
import {getCurrentInstance} from "@vue/runtime-core";
import {onBeforeUnmount, onMounted, ref} from "vue";

// 引入消息总线
const cxt = getCurrentInstance() //相当于Vue2中的this
const bus = cxt.appContext.config.globalProperties.$bus

const refSlideView = ref();

defineOptions({
  name: 'SlideView', // 客户管理详情 滑动view
})

const props = defineProps({
  showClose: {
    type: Boolean,
    default: true
  },
  bodyStyle: {
    type: Object,
    default: () => {
      return {padding: 0}
    }
  },
  appendToBody: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['afterEnter', 'close'])

const zIndex = ref(getMaxIndex())
const isEditClose = ref(false)
const dialogVisible = ref(false)
const targetData = ref({
  isMoveClick: false,
  pageX: 0,
  pageY: 0
})


function created() {
  bus.on('setEditClose', value => {
    isEditClose.value = value
  })
}

created()


onMounted(() => {
  if (props.appendToBody) {
    document.body.appendChild(refSlideView.value)
  }

  // console.log("2")
  // document.getElementById('app').addEventListener('click', handleDocumentClick, false)
  // console.log("3")
  // document.getElementById('app').addEventListener('mousedown', handleDocumentMousedown, false)
  // console.log("4")
  // document.getElementById('app').addEventListener('mouseup', handleDocumentMouseup, false)
  // console.log("5")
})

onBeforeUnmount(() => {
  console.log("onBeforeUnmount")

  dialogVisible.value = false

  if (props.appendToBody && refSlideView.value && refSlideView.value.parentNode) {
    refSlideView.value.parentNode.removeChild(refSlideView.value)
  }
  // document
  //     .getElementById('app')
  //     .removeEventListener('click', handleDocumentClick, false)
  // document
  //     .getElementById('app')
  //     .removeEventListener('mousedown', handleDocumentMousedown, false)
  // document
  //     .getElementById('app')
  //     .removeEventListener('mouseup', handleDocumentMouseup, false)
})

function handleDocumentClick(e) {
  if (targetData.value.isMoveClick) {
    targetData.value.isMoveClick = false
  } else {
    let hidden = true

    if (refSlideView.value && refSlideView.value.contains(e.target)) {
      hidden = false
    }
    if (hidden) {
      close()
    }
  }
}

function handleDocumentMousedown(e) {
  targetData.value.pageX = e.pageX
  targetData.value.pageY = e.pageY
}

function handleDocumentMouseup(e) {
  if (Math.abs(targetData.value.pageX - e.pageX) > 30 || Math.abs(targetData.value.pageY - e.pageY) > 30) {
    targetData.value.isMoveClick = true
  } else {
    targetData.value.isMoveClick = false
  }
}


function afterEnter() {
  emits('afterEnter')
}

function close() {
  if (isEditClose.value) {
    dialogVisible.value = true
  } else {
    emits('close')
  }
}

function dialogSure() {
  dialogVisible.value = false
  emits('close')
}
</script>

<style lang="scss" scoped>
.slide-fade-enter-active,
.slide-fade-leave-active {
  will-change: transform;
  transition: all 0.35s ease;
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(100%);
}

.el-card {
  overflow: visible;
}

.slide-detail-card-container {
  // position: relative;
  background-color: $xr-backgroud;
}

.close-btn {
  position: absolute;
  top: 160px;
  left: -40px;
  z-index: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding: 6px;

  :deep( i ) {
    font-size: 26px;
    margin-right: 0;
  }
}
</style>
